<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>视频播放器</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }

      .app {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        overflow: hidden;
      }

      .video {
        width: 100%;
        height: 100%;
      }

      #my-video {
        object-fit: cover;
        object-position: center center;
      }
    </style>
  </head>

  <body>
    <div id="app" class="app">
      <video
        preload="auto"
        id="my-video"
        ref="video"
        :src="videoUrl"
        @click="player"
        loop
        autoplay="autoplay"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-ignore-metadata="true"
        width="100%"
        height="100%"
      >
        <p>不支持video</p>
      </video>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    // vue 解析
    var Application = new Vue({
      el: "#app",
      data: {
        videoUrl: "",
        video: null,
      },
      mounted: function () {
        this.videoUrl =
          "http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4";
        this.video = this.$refs.video;
      },
      methods: {
        player: function () {
          console.log(this.video.clientWidth);
          console.log(this.video.clientHeight);
          if (this.video.paused) {
            // 播放
            this.video.play();
          } else {
            // 暂停
            this.video.pause();
          }
        },
      },
    });
  </script>
</html>
